import React from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';

const BackButton: React.FC = () => {
  const navigate = useNavigate();

  return (
    <motion.button
      onClick={() => navigate('/')}
      className="fixed top-6 left-6 inline-flex items-center px-4 py-2 rounded-xl bg-white/60 backdrop-blur-sm border border-white/30 text-gray-700 shadow-lg hover:shadow-xl transition-all duration-200 z-50"
      whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.8)" }}
      whileTap={{ scale: 0.98 }}
    >
      <svg 
        className="w-5 h-5 mr-2" 
        fill="none" 
        stroke="currentColor" 
        viewBox="0 0 24 24"
      >
        <path 
          strokeLinecap="round" 
          strokeLinejoin="round" 
          strokeWidth={2} 
          d="M10 19l-7-7m0 0l7-7m-7 7h18" 
        />
      </svg>
      返回首页
    </motion.button>
  );
};

export default BackButton; 